<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title>Flotr: Basic Axis Example</title>
		<link rel="stylesheet" href="style.css" type="text/css" />
		<script type="text/javascript" src="../lib/yepnope.js"></script>
	</head>
	<body>
		
		<!-- ad -->
		
		<div id="wrapper">
			<h1></h1>
			<div id="container" style="width:600px;height:300px;"></div>
			<h2>Example</h2>
			<p>This graph show a 5 series. The axis are configured and the vertical grid lines are not rendered. <br />
			There are null values on the sinus series.</p>
			<p>Finished? Go to the example <a href="index.html" title="Flotr Example Index Page">index page</a>, play with the <a href="../../playground/index.html" title="Flotr playground">playground</a> or read the <a href="http://www.solutoire.com/flotr/docs/" title="Flotr Documentation Pages">Flotr Documentation Pages</a>.</p>
			<h2>The Code</h2>
			<pre id="code-view"><code class="javascript"></code></pre>
			<div id="footer">Copyright &copy; 2008 Bas Wenneker, <a href="http://www.solutoire.com">solutoire.com</a></div>
		</div>
		
		<!-- ad -->
		
		<script type="text/javascript">
			function example(){
                var container = document.getElementById('container');
				/**
				 * Fill series d1 and d2.
				 */
				var d1 = [];
				var d2 = [];
				var d3 = [];
				var d4 = [];
				var d5 = [];
				
				for(var i = 0; i <= 10; i += 0.1){
					d1.push([i, 4 + Math.pow(i,1.5)]);
					d2.push([i, Math.pow(i,3)]);
					d3.push([i, i*5+3*Math.sin(i*4)]);
					d4.push([i, i]);
					if( i.toFixed(1)%1 == 0 ){
						d5.push([i, 2*i]);
					}
				}
				
				d3[30][1] = null;
				d3[31][1] = null;
						    
				/**
				 * Draw the graph.
				 */
				var f = Flotr.draw(container,[ 
						{data:d1, label:'y = 4 + x^(1.5)', lines:{fill:true}}, 
						{data:d2, label:'y = x^3'}, 
						{data:d3, label:'y = 5x + 3sin(4x)'}, 
						{data:d4, label:'y = x'},
						{data:d5, label:'y = 2x', lines: {show: true}, points: {show: true}}
					],{
						xaxis:{
							noTicks: 7,	// Display 7 ticks.
							tickFormatter: function(n){ return '('+n+')'; }, // => displays tick values between brackets.
							min: 1,		// => part of the series is not displayed.
							max: 7.5	// => part of the series is not displayed.
						},
						yaxis:{
							ticks: [[ 0, "Lower"], 10, 20, 30, [40, "Upper"]],
							max: 40
						},
						grid:{
							verticalLines:false,
							backgroundColor: {colors: [[0,'#fff'], [1,'#ccc']], start: 'top', end: 'bottom'}
						},
						legend: {
              position: 'nw'
            },
            title: 'Basic Axis example',
            subtitle: 'This is a subtitle'
				});
			};
		</script>
		
		<!-- analytics -->
		
	</body>
  <script type="text/javascript" src="includes.js"></script>
</html>
